<template>
	<view class="container">
		<!-- 用户个人信息 -->
		<view class="user-info-wrapper">
			<view class="user-info">
				<view class="user-avatar" @tap="navUserInfo">
					<muqian-lazyLoad :src="user.avatarUrl" width="110rpx" height="110rpx" borderRadius="50%"></muqian-lazyLoad>
					<!-- <image :src="baseUrl + user.avatarUrl" alt="" /> -->
				</view>
				<view class="user-phone" style="margin-left: 20rpx">
					<text>{{ user.nickname }}</text>
					<!-- <text>{{ user.phone }}</text> -->
				</view>
			
				<view class="user-grade">
					<muqian-lazyLoad :src="user.gradeLogo" width="80rpx" height="80rpx" borderRadius="50%"></muqian-lazyLoad>
					<text class="grade-name">{{ user.gradeName }}</text>
				</view>
			</view>

			<!-- 用户钱包 -->
			<view class="user-wallet">
				<view class="wallet-item">
					<view>{{ user.balance }}</view>
					<view>余额</view>
				</view>
				<view class="wallet-item">
					<view>{{ user.giftBalance }}</view>
					<view>赠送</view>
				</view>
				<view class="wallet-item" @click="showTable()">
					<view>{{ user.commission }}</view>
					<view>佣金</view>
				</view>
				<view class="wallet-item">
					<view>{{ user.score }}</view>
					<view>积分</view>
				</view>
			</view>
		</view>

		<view class="user-content">
			<!-- 我的订单 -->
			<view class="user-order">
				<view style="padding: 0 20rpx">
					<view style="padding: 20rpx 0; border-bottom: 1rpx solid #e8e9ee">我的订单</view>
				</view>

				<view class="order-status-list">
					<navigator :url="orderStatus.navUrl" class="order-status-item" v-for="(orderStatus, index) in orderStatusList" :key="index" hover-class="none">
						<uni-badge class="uni-badge-left-margin" :text="orderStatus.badge" absolute="rightTop" size="small">
							<i :class="orderStatus.icon"></i>
						</uni-badge>
						<text>{{ orderStatus.text }}</text>
					</navigator>
				</view>
			</view>

			<!-- 服务台 -->
			<view class="wx-service">
				<view style="padding: 0 20rpx">
					<view style="padding: 20rpx 0; border-bottom: 1rpx solid #e8e9ee">服务台</view>
				</view>
				<view class="service-list">
					<navigator :url="service.navUrl" class="service-item" v-for="(service, index) in serviceList" :key="index" hover-class="none">
						<i class="iconfont" :class="'icon-' + service.style"></i>
						<text>{{ service.name }}</text>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUser, listUserService, getOrderStatusNum } from '@/api/user';
import { handleSubscript } from '@/utils/cart.js';
export default {
	onShow() {
		this.getUser();
		this.getWxService();
		this.getUserOrderStatusNum();
		handleSubscript();
	},
	data() {
		return {
			avatarUrl: '../../static/logo.png',
			nickame: '',
			user: '',
			orderStatusList: [
				{
					icon: 'iconfont icon-daifukuan',
					text: '待付款',
					badge: '',
					navUrl: '/pages/user/order/order_list?orderStatus=' + 1
				},
				{
					icon: 'iconfont icon-daishouhuo',
					text: '待收货',
					badge: '',
					navUrl: '/pages/user/order/order_list?orderStatus=' + 2
				},
				{
					icon: 'iconfont icon-yiwancheng',
					text: '已完成',
					badge: '',
					navUrl: '/pages/user/order/order_list?orderStatus=' + 3
				},
				{
					icon: 'iconfont icon-tuikuan',
					text: '退款/售后',
					badge: '',
					navUrl: '/pages/user/order/order_list?orderStatus=' + 4
				}
			],
			serviceList: [
				{ id: 1, name: '充值中心', style: 'chongzhizhongxin' },
				{ id: 2, name: '我的资料', style: 'wodeziliao' },
				{ id: 3, name: '收货地址', style: 'dizhi' },
				{ id: 4, name: '我的评价', style: 'wodepingjia' },
				{ id: 5, name: '联系我们', style: 'dianhua' },
				{ id: 6, name: '分享有礼', style: 'fenxiangyouli' },
				{ id: 7, name: '我的优惠券', style: 'coupon' },
				{ id: 8, name: '我的佣金', style: 'commission' }
			]
		};
	},
	methods: {
		showTable(){
			uni.showToast({
				title: '请联系客服，进店佣金兑换！',
				mask: true,
				icon: 'none',
				duration: 2000
			});
		},
		getUser() {
			getUser().then((res) => {
				this.user = res.data;
				console.log('user', this.user);
				this.$store.dispatch('user/setUserId', this.user.id);
			});
		},
		getWxService() {
			listUserService().then((res) => {
				console.log(res);
				this.serviceList = res.data;
			});
		},
		/**
		 * 拿到待付款和待收货两种订单状态的id，用于设置订单图标的角标
		 * 待付款：1
		 * 待收货：2
		 */
		getUserOrderStatusNum() {
			getOrderStatusNum(1).then((res) => {
				this.orderStatusList[0].badge = res.data;
			});
			getOrderStatusNum(2).then((res) => {
				this.orderStatusList[1].badge = res.data;
			});
		},
		navUserInfo() {
			uni.navigateTo({
				url: '/pages/user/service/user_info/user_info'
			});
		}
	}
};
</script>

<style scoped lang="less">
.container {
	background-color: #f5f5f5;
}

.user-info-wrapper {
	background-color: #2d3953;
	height: 30vh;
	position: relative;
	padding-bottom: 4vh;
	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
		padding: 0 30rpx;
		.user-avatar {
			display: flex;
			// align-items: center;
			image {
				width: 110rpx;
				height: 110rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}

		.user-phone {
			font-size: 25rpx;
			color: #968c85;
			flex: 1;
		}

		.user-grade {
			width: 120rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.grade-name {
				width: 120rpx;
				font-size: 25rpx;
				color: #968c85;
				position: absolute;
				text-align: center;
				top: 100rpx;
				left: 0;
			}
			image {
				width: 95rpx;
				height: 95rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}
	.user-wallet {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		width: 100%;
		bottom: 20rpx;
		color: #fff;
		font-size: 30rpx;

		.wallet-item {
			text-align: center;
			display: flex;
			flex-direction: column;
			gap: 5rpx;
		}
	}
}

.user-content {
	padding: 30rpx 20rpx;
}

.user-order,
.wx-service {
	background-color: #fff;
	border-radius: 20rpx;

	.order-status-list,
	.service-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20rpx 0;

		.order-status-item,
		.service-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;
			width: 25%;
			font-size: 28rpx;
			padding: 20rpx 0;

			i {
				font-size: 60rpx;
				background-image: linear-gradient(to top right, #ffd8af, #ffaf86);
				background-clip: text;
				color: transparent;
			}
		}
	}
}

.wx-service {
	margin-top: 30rpx;
}
</style>
